<template>
  <div class="component-docs">
    <!-- Props 文档 -->
    <div class="docs-section">
      <h3 class="docs-title">
        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
          />
        </svg>
        Props
      </h3>
      <div class="docs-table-container">
        <table class="docs-table">
          <thead>
            <tr>
              <th>属性名</th>
              <th>类型</th>
              <th>默认值</th>
              <th>必填</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="prop in componentProps.props" :key="prop.name">
              <td>
                <code class="prop-name">{{ prop.name }}</code>
              </td>
              <td>
                <code class="prop-type">{{ prop.type }}</code>
              </td>
              <td>
                <code v-if="prop.default" class="prop-default">{{ prop.default }}</code>
                <span v-else class="text-base-content/40">-</span>
              </td>
              <td>
                <span :class="prop.required ? 'required' : 'optional'">
                  {{ prop.required ? '是' : '否' }}
                </span>
              </td>
              <td class="prop-description">
                {{ prop.description }}
                <div v-if="prop.options" class="prop-options">
                  <span class="text-xs text-base-content/60">可选值: </span>
                  <code v-for="option in prop.options" :key="option" class="option-value">
                    {{ option }}
                  </code>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Emits 文档 -->
    <div class="docs-section">
      <h3 class="docs-title">
        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m0 0V1a1 1 0 011 1v18a1 1 0 01-1 1H6a1 1 0 01-1-1V2a1 1 0 011-1h8v3z"
          />
        </svg>
        Events
      </h3>
      <div class="docs-table-container">
        <table class="docs-table">
          <thead>
            <tr>
              <th>事件名</th>
              <th>参数</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="emit in componentProps.emits" :key="emit.name">
              <td>
                <code class="emit-name">{{ emit.name }}</code>
              </td>
              <td>
                <div v-if="emit.parameters.length > 0" class="emit-parameters">
                  <div v-for="param in emit.parameters" :key="param.name" class="parameter">
                    <code class="param-name">{{ param.name }}</code>
                    <code class="param-type">{{ param.type }}</code>
                    <span class="param-description">{{ param.description }}</span>
                  </div>
                </div>
                <span v-else class="text-base-content/40">无参数</span>
              </td>
              <td class="emit-description">
                {{ emit.description }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 插槽文档 -->
    <div class="docs-section">
      <h3 class="docs-title">
        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
          />
        </svg>
        Slots
      </h3>
      <div class="slots-grid">
        <div v-for="slot in slotDocumentation" :key="slot.name" class="slot-card">
          <div class="slot-header">
            <code class="slot-name">{{ slot.name }}</code>
            <span :class="slot.scoped ? 'scoped' : 'default'">
              {{ slot.scoped ? '作用域插槽' : '默认插槽' }}
            </span>
          </div>
          <div class="slot-description">{{ slot.description }}</div>
          <div v-if="slot.props && slot.props.length > 0" class="slot-props">
            <div class="slot-props-title">插槽参数:</div>
            <div v-for="prop in slot.props" :key="prop.name" class="slot-prop">
              <code class="slot-prop-name">{{ prop.name }}</code>
              <code class="slot-prop-type">{{ prop.type }}</code>
              <span class="slot-prop-desc">{{ prop.description }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- TypeScript 类型定义 -->
    <div class="docs-section">
      <h3 class="docs-title">
        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
          />
        </svg>
        TypeScript 类型定义
      </h3>
      <div class="typescript-section">
        <div class="code-block">
          <pre><code class="language-typescript">{{ typescriptDefinitions }}</code></pre>
        </div>
        <div class="copy-button-container">
          <button @click="copyTypeScriptCode" class="copy-button">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
              />
            </svg>
            复制类型定义
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropDocumentation, EmitDocumentation } from './componentDocs'

interface SlotDocumentation {
  name: string
  scoped: boolean
  description: string
  props?: Array<{
    name: string
    type: string
    description: string
  }>
}

interface Props {
  props: PropDocumentation[]
  emits: EmitDocumentation[]
  slots?: SlotDocumentation[]
}

const componentProps = withDefaults(defineProps<Props>(), {
  slots: () => [],
})

// TypeScript 类型定义
const typescriptDefinitions = `// CommentItem 组件类型定义
import type { Comment } from '@/apis/methods/comment.api'

// Props 接口
interface CommentItemProps {
  comment: Comment
  replies?: Comment[]
  showReplies?: boolean
  hasMoreReplies?: boolean
  submitting?: boolean
  // 布局控制
  layout?: 'default' | 'compact' | 'minimal' | 'card'
  // 组件显示控制
  showAvatar?: boolean
  showActions?: boolean
  showReplyButton?: boolean
  showLikeButton?: boolean
  showMoreButton?: boolean
  showTimestamp?: boolean
  showReplyCount?: boolean
  showRepliesSection?: boolean
  // 样式配置
  avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  cardStyle?: 'default' | 'minimal' | 'elevated' | 'outlined' | 'flat'
  spacing?: 'tight' | 'normal' | 'loose'
  // 交互配置
  enableHover?: boolean
  enableAnimations?: boolean
  enableClickOutside?: boolean
}

// Emits 接口
interface CommentItemEmits {
  toggleReplies: [commentId: string]
  loadMoreReplies: [parentId: string]
  toggleLike: [commentId: string]
  createReply: [parentId: string, content: string, mentionedUsers: string[]]
  reportComment: [commentId: string]
  deleteComment: [commentId: string]
  avatarClick: [author: Comment['author']]
  authorClick: [author: Comment['author']]
  contentClick: [comment: Comment]
  replyClick: [reply: Comment]
}

// 插槽类型定义
interface CommentItemSlots {
  // 头像插槽
  avatar: {
    author: Comment['author']
    sizeClass: string
    onClick: () => void
  }
  // 作者信息插槽
  author: {
    author: Comment['author']
    onClick: () => void
  }
  // 徽章插槽
  badge: {
    author: Comment['author']
  }
  // 时间戳插槽
  timestamp: {
    timestamp: string
    formattedTime: string
  }
  // 更多操作插槽
  'more-actions': {
    comment: Comment
    showMore: boolean
    onToggle: () => void
    onReport: () => void
    onDelete: () => void
  }
  // 内容插槽
  content: {
    content: string
    comment: Comment
    onClick: () => void
  }
  // 操作按钮插槽
  actions: {
    comment: Comment
    handlers: {
      toggleLike: () => void
      createReply: () => void
      showMoreActions: () => void
    }
  }
  // 回复表单插槽
  'reply-form': {
    comment: Comment
    replyContent: string
    submitting: boolean
    onSubmit: (content: string) => void
    onCancel: () => void
  }
  // 回复列表插槽
  replies: {
    replies: Comment[]
    formatTime: (time: string) => string
  }
  // 回复头像插槽
  'reply-avatar': {
    author: Comment['author']
  }
}

// 使用示例
const props = defineProps<CommentItemProps>()
const emit = defineEmits<CommentItemEmits>()`

// 复制 TypeScript 代码
const copyTypeScriptCode = async () => {
  try {
    await navigator.clipboard.writeText(typescriptDefinitions)
    console.log('TypeScript 类型定义已复制到剪贴板')
    // 这里可以添加一个toast提示
  } catch (err) {
    console.error('复制失败:', err)
  }
}

// 插槽文档数据
const slotDocumentation: SlotDocumentation[] = [
  {
    name: 'avatar',
    scoped: true,
    description: '自定义头像显示',
    props: [
      { name: 'author', type: 'Comment["author"]', description: '作者信息' },
      { name: 'sizeClass', type: 'string', description: '头像尺寸样式类' },
      { name: 'onClick', type: '() => void', description: '点击事件处理函数' },
    ],
  },
  {
    name: 'author',
    scoped: true,
    description: '自定义作者信息显示',
    props: [
      { name: 'author', type: 'Comment["author"]', description: '作者信息' },
      { name: 'onClick', type: '() => void', description: '点击事件处理函数' },
    ],
  },
  {
    name: 'badge',
    scoped: true,
    description: '自定义徽章显示',
    props: [{ name: 'author', type: 'Comment["author"]', description: '作者信息' }],
  },
  {
    name: 'timestamp',
    scoped: true,
    description: '自定义时间戳显示',
    props: [
      { name: 'timestamp', type: 'string', description: '时间戳字符串' },
      { name: 'formattedTime', type: 'string', description: '格式化后的时间' },
    ],
  },
  {
    name: 'more-actions',
    scoped: true,
    description: '自定义更多操作菜单',
    props: [
      { name: 'comment', type: 'Comment', description: '评论对象' },
      { name: 'showMore', type: 'boolean', description: '是否显示更多选项' },
      { name: 'onToggle', type: '() => void', description: '切换显示状态' },
      { name: 'onReport', type: '() => void', description: '举报处理函数' },
      { name: 'onDelete', type: '() => void', description: '删除处理函数' },
    ],
  },
  {
    name: 'content',
    scoped: true,
    description: '自定义评论内容显示',
    props: [
      { name: 'content', type: 'string', description: '评论内容' },
      { name: 'comment', type: 'Comment', description: '评论对象' },
      { name: 'onClick', type: '() => void', description: '点击事件处理函数' },
    ],
  },
  {
    name: 'actions',
    scoped: true,
    description: '自定义操作按钮区域',
    props: [
      { name: 'comment', type: 'Comment', description: '评论对象' },
      { name: 'handlers', type: 'object', description: '事件处理函数集合' },
    ],
  },
  {
    name: 'reply-form',
    scoped: true,
    description: '自定义回复表单',
    props: [
      { name: 'comment', type: 'Comment', description: '父评论对象' },
      { name: 'replyContent', type: 'string', description: '回复内容' },
      { name: 'submitting', type: 'boolean', description: '是否正在提交' },
      { name: 'onSubmit', type: '(content: string) => void', description: '提交处理函数' },
      { name: 'onCancel', type: '() => void', description: '取消处理函数' },
    ],
  },
  {
    name: 'replies',
    scoped: true,
    description: '自定义回复列表显示',
    props: [
      { name: 'replies', type: 'Comment[]', description: '回复列表' },
      { name: 'formatTime', type: '(time: string) => string', description: '时间格式化函数' },
    ],
  },
  {
    name: 'reply-avatar',
    scoped: true,
    description: '自定义回复头像显示',
    props: [{ name: 'author', type: 'Comment["author"]', description: '作者信息' }],
  },
]
</script>

<style scoped>
.component-docs {
  @apply space-y-8;
  font-family:
    'Inter',
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.docs-section {
  @apply bg-base-100 rounded-xl border border-base-300/30 overflow-hidden shadow-sm;
}

.docs-title {
  @apply text-xl font-bold text-base-content px-6 py-5 bg-gradient-to-r from-base-200 to-base-300/50 border-b border-base-300/30 flex items-center;
  font-family:
    'Inter',
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.docs-table-container {
  @apply overflow-x-auto;
}

.docs-table {
  @apply w-full;
  font-family:
    'Inter',
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.docs-table th {
  @apply px-6 py-4 text-left text-sm font-semibold text-base-content/80 bg-base-200/50 border-b border-base-300/30;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.docs-table td {
  @apply px-6 py-4 text-sm border-b border-base-300/20;
  font-weight: 400;
  line-height: 1.5;
}

.prop-name,
.emit-name,
.slot-name {
  @apply bg-primary/15 text-primary px-3 py-1.5 rounded-md text-sm font-semibold;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prop-type,
.param-type,
.slot-prop-type {
  @apply bg-secondary/15 text-secondary px-3 py-1.5 rounded-md text-sm font-semibold;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prop-default {
  @apply bg-accent/15 text-accent px-3 py-1.5 rounded-md text-sm font-semibold;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.required {
  @apply text-error font-semibold;
  font-weight: 600;
}

.optional {
  @apply text-base-content/60 font-medium;
  font-weight: 500;
}

.prop-description,
.emit-description {
  @apply text-base-content/85 max-w-lg leading-relaxed;
  font-weight: 400;
  line-height: 1.6;
}

.prop-options {
  @apply mt-3 space-x-2;
}

.option-value {
  @apply bg-base-200 text-base-content/80 px-2 py-1 rounded-md text-xs font-medium;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 500;
}

.emit-parameters {
  @apply space-y-3;
}

.parameter {
  @apply flex items-center gap-3 text-sm;
}

.param-name {
  @apply bg-primary/15 text-primary px-2 py-1 rounded-md text-xs font-semibold;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
}

.param-description {
  @apply text-base-content/75 font-medium;
  font-weight: 500;
}

.slots-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6;
}

.slot-card {
  @apply bg-base-200/30 rounded-xl p-5 border border-base-300/20 shadow-sm hover:shadow-md transition-shadow duration-200;
}

.slot-header {
  @apply flex items-center justify-between mb-3;
}

.scoped {
  @apply text-primary text-xs font-bold px-2 py-1 rounded-md bg-primary/10;
  font-weight: 700;
}

.default {
  @apply text-base-content/60 text-xs font-medium px-2 py-1 rounded-md bg-base-200;
  font-weight: 500;
}

.slot-description {
  @apply text-sm text-base-content/85 mb-4 leading-relaxed;
  font-weight: 400;
  line-height: 1.6;
}

.slot-props {
  @apply space-y-3;
}

.slot-props-title {
  @apply text-xs font-bold text-base-content/80 mb-3;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.slot-prop {
  @apply flex items-center gap-3 text-xs;
}

.slot-prop-name {
  @apply bg-primary/15 text-primary px-2 py-1 rounded-md font-semibold;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
}

.slot-prop-desc {
  @apply text-base-content/75 font-medium;
  font-weight: 500;
}

/* TypeScript 部分样式 */
.typescript-section {
  @apply p-6;
}

.code-block {
  @apply bg-base-200/50 rounded-lg p-6 font-mono text-sm overflow-x-auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  border: 1px solid rgb(209 213 219 / 0.3);
}

.copy-button-container {
  @apply flex justify-end mt-4;
}

.copy-button {
  @apply flex items-center gap-2 px-4 py-2 bg-primary text-primary-content rounded-lg hover:bg-primary/90 transition-colors duration-200 text-sm font-medium;
  font-weight: 500;
}

.copy-button:hover {
  @apply transform scale-105;
}

/* 语法高亮 */
.language-typescript {
  @apply text-base-content;
}

.language-typescript .keyword {
  @apply text-blue-600 font-semibold;
}

.language-typescript .string {
  @apply text-green-600;
}

.language-typescript .comment {
  @apply text-gray-500 italic;
}

.language-typescript .type {
  @apply text-purple-600 font-semibold;
}

.language-typescript .interface {
  @apply text-orange-600 font-bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .slots-grid {
    @apply grid-cols-1 gap-4;
  }

  .docs-table-container {
    @apply text-xs;
  }

  .docs-table th,
  .docs-table td {
    @apply px-4 py-3;
  }

  .docs-title {
    @apply text-lg px-4 py-4;
  }
}
</style>
